<template>
  <!-- 手机号码登录 -->
  <div class="telFormStyle">
    <el-form
      label-position="top"
      :rules="telState.rules"
      :model="telState.ruleForm"
      ref="loginForm"
    >
      <el-form-item class="m-b50" prop="phone">
        <el-input
          name="phone"
          v-model.number="telState.ruleForm.phone"
          placeholder="输入手机号"
        >
          <template #prefix>
            <span style="font-size: 18px; color: #808080">+86</span>
            <el-divider
              direction="vertical"
              style="height: 30px; border-left: 1px solid #e3e7f1"
            />
          </template>
        </el-input>
      </el-form-item>
      <el-form-item class="codeInputBox" prop="code">
        <el-input
          class="yzInput"
          name="code"
          v-model.number="telState.ruleForm.code"
          placeholder="输入验证码"
        >
          <template #prefix>
            <img
              style="
                width: 24px;
                height: 24px;
                margin-right: 3px;
                margin-left: 3px;
              "
              src="@/assets/iconImg/code.png"
              alt=""
            />
            <el-divider
              direction="vertical"
              style="height: 30px; border-left: 1px solid #e3e7f1"
            />
          </template>
        </el-input>
        <el-button
          :disabled="telState.isDisabled"
          @click="getCode"
          class="yzBtn"
          >{{ tipMessage }}</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { reactive, ref } from "vue";
import { ElForm, ElFormItem, ElDivider } from "element-plus";
const checkPhone = (rule, value, callback) => {
  const reg = /(^0{0,1}(13|14|15|17|18|19)[0-9]{9}$)/;
  if (reg.test(value)) {
    callback();
  } else {
    callback(new Error("请输入正确的手机号"));
  }
};
const checkCode = (rule, value, callback) => {
  if (value.length === 6) {
    callback();
  } else {
    callback(new Error("验证码为6位"));
  }
};

const telState = reactive({
  isDisabled: false,
  ruleForm: {
    phone: null,
    code: null,
  },
  checked: true,
  rules: {
    phone: [
      { required: true, trigger: "blur", message: "请输入手机号" },
      { validator: checkPhone, trigger: "blur" },
    ],
    code: [
      { required: true, trigger: "blur", message: "请输入验证码" },
      { validator: checkCode, trigger: "blur" },
    ],
  },
});

const loginForm = ref(null);
let tipMessage = ref("获取短信验证码");
const getCode = () => {
  loginForm.value.validateField("phone", (vaild) => {
    if (vaild) {
      let time = 60;
      tipMessage.value = `验证码已发送（${time}）`;
      telState.isDisabled = true;
      const timer = setInterval(() => {
        if (time === 0) {
          tipMessage.value = "获取短信验证码";
          telState.isDisabled = false;
          clearInterval(timer);
        } else {
          time--;
          tipMessage.value = `验证码已发送（${time}）`;
        }
      }, 1000);
    }
  });
};

const submitForm = () => {
  loginForm.value.validateField("code", (vaild) => {
    if (vaild) {
      // 接口暂无
    }
  });
};
</script>

<style lang="scss" scoped>
.telFormStyle {
  :deep(.el-form) {
    .el-form-item.is-error {
      .el-input {
        .el-input__wrapper {
          box-shadow: 0 0 0 1px #ef1515;
        }
      }
    }
    .el-form-item__content {
      .el-input {
        .el-input__wrapper {
          height: 52px;
          border-radius: 6px;
          background-color: #f7f7fa;
          box-shadow: 0 0 0 1px #f7f7fa;
          .el-input__inner {
            font-size: 18px;
            color: #808080;
          }
        }
        .el-input__wrapper.is-focus {
          box-shadow: 0 0 0 1px #808080;
        }
      }
      .el-form-item__error {
        font-size: 14px;
        color: #ef1515;
        top: 138%;
      }
    }
  }
  .codeInputBox {
    margin-bottom: 72px;
    .yzInput {
      flex: 1;
      margin-right: 8px;
      margin-top: -11px;
    }
    .yzBtn {
      width: 176px;
      height: 52px;
    }
  }
}
</style>
